<template>
  <view>
    <view class="shopro-date-timer">
      <view style="font-size: 28rpx">日期区间: </view>

      <view class="shopro-date-timer-text">
        <picker :value="startDate" mode="date" @change="(e) => confirmStartTime(e, 'startDate')">
          <text
            @click="
              showStartTime = true;
              showEndTime = false;
            "
            :style="{ color: showStartTime ? 'rgb(246, 197, 67)' : '#666' }"
            >{{ startDate }}</text
          >
        </picker>

        <text class="shopro-date-timer-text-line">-</text>
        <picker :value="endDate" mode="date" @change="(e) => confirmStartTime(e, 'endDate')">
          <text
            @click="
              showEndTime = true;
              showStartTime = false;
            "
            :style="{ color: showEndTime ? 'rgb(246, 197, 67)' : '#666' }"
            >{{ endDate }}</text
          >
        </picker>
      </view>
    </view>
    <view class="shopro-date-timer-countdown">
      <view
        class="shopro-date-timer-countdown-item"
        v-for="item in timeList"
        :key="item.value"
        :class="{ active: activeTime === item.value }"
        @click="handleClick(item.value)"
      >
        <view>{{ item.label }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { formatDate } from "../../utils/common";

// 类型定义
interface TimeItem {
  label: string;
  value: string;
}

interface DateValue {
  year: number;
  month: number;
  day: number;
}

interface PickerParams {
  year: boolean;
  month: boolean;
  day: boolean;
  hour: boolean;
  minute: boolean;
  second: boolean;
}

// 定义 emits
const emit = defineEmits<{
  (e: "confirm", value: { startDate: string; endDate: string }): void;
}>();

// 响应式数据
const showStartTime = ref(false);
const showEndTime = ref(false);
const startDate = ref("2024-05-01");
const endDate = ref(formatDate(new Date().getTime(), "YYYY-MM-DD"));
const activeTime = ref("4");

const params = ref<PickerParams>({
  year: true,
  month: true,
  day: true,
  hour: false,
  minute: false,
  second: false,
});

const timeList = ref<TimeItem[]>([
  {
    label: "至今",
    value: "4",
  },
  {
    label: "今日",
    value: "1",
  },
  {
    label: "七天",
    value: "2",
  },
  {
    label: "本月",
    value: "3",
  },
]);

// 方法
const confirmStartTime = (value: any, type: "startDate" | "endDate") => {
  if (type === "startDate") {
    startDate.value = value.detail.value;
		// if (new Date(startDate.value) < new Date('2024-05-01')) {
    //   uni.showToast({
    //     title: "开始时间不能小于至今",
    //     icon: "none",
    //   });
    //   startDate.value = endDate.value;
    //   return;
    // }

    if (new Date(startDate.value) > new Date(endDate.value)) {
      uni.showToast({
        title: "开始时间不能大于结束时间",
        icon: "none",
      });
      startDate.value = endDate.value;
      return;
    }
  } else {
    endDate.value = value.detail.value;

    if (new Date(endDate.value) < new Date(startDate.value)) {
      uni.showToast({
        title: "结束时间不能小于开始时间",
        icon: "none",
      });
      endDate.value = startDate.value;
      return;
    }
  }
  showStartTime.value = false;
  showEndTime.value = false;

  emit("confirm", {
    startDate: startDate.value,
    endDate: endDate.value,
  });
};

const handleClick = (value: string) => {
  activeTime.value = value;

  switch (value) {
    case "1":
      startDate.value = formatDate(new Date().getTime(), "YYYY-MM-DD");
      endDate.value = formatDate(new Date().getTime(), "YYYY-MM-DD");
      break;
    case "2":
      startDate.value = formatDate(
        new Date().getTime() - 6 * 24 * 60 * 60 * 1000,
        "YYYY-MM-DD"
      );
      endDate.value = formatDate(new Date().getTime(), "YYYY-MM-DD");
      break;
    case "3":
      const now = new Date();
      const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
      startDate.value = formatDate(firstDay.getTime(), "YYYY-MM-DD");
      endDate.value = formatDate(now.getTime(), "YYYY-MM-DD");
      break;
    case "4":
      startDate.value = formatDate("2024-05-01 00:00:00", "YYYY-MM-DD");
      endDate.value = formatDate(new Date().getTime(), "YYYY-MM-DD");
      break;
  }

  emit("confirm", {
    startDate: startDate.value,
    endDate: endDate.value,
  });
};
</script>

<style lang="scss" scoped>
.shopro-date-timer {
  @include flexR;
  padding: 24rpx 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  font-size: 24rpx;
  color: #222;
}
.shopro-date-timer-text {
  color: #666;
  margin-left: 24px;
  @include flexR;
}
.shopro-date-timer-text-line {
  margin: 0 12px;
}
.shopro-date-timer-countdown {
  @include flexR;
  margin-bottom: 12rpx;
}
.shopro-date-timer-countdown-item {
  color: #fff;
  width: 120rpx;
  height: 52rpx;
  border-radius: 32rpx;
  background-color: #ccc;
  font-size: 24rpx;
  margin: 0 12rpx;
  @include flexRC;
  transition: all 0.3s ease;
}
.active {
  background: linear-gradient( 90deg, #FFB413 0%, #FF9A00 100%);
}
</style>
